<template>
  <div>
    <Wrap>
      <div slot="main_wrap">
        <!-- <div class="form-inline form-find ng-pristine ng-valid">
            <div class="form-group">
								<label>项目名称：</label>
						</div>
            <div class="form-group" style="min-width:200px">
              <avue-input-tree v-model="form2" placeholder="请选择内容" :append-to-body="false" type="tree" :dic="dic"></avue-input-tree>
            </div>
        </div> -->
        <div class="content">
          <div class="left-content">
            <table class="table table-condensed table-striped table-bordered table-hover coolead-basic-info">
                <thead>
                <tr>
                    <th colspan="4" class="body-head-title">
                      <span> 
                        项目基本信息
                      </span>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="col-md-2">项目全名</td>
                    <td class="col-md-2"><span class="ng-binding">{{dataObj.fullName}}</span></td>
                    <td class="col-md-2">占地面积(㎡)</td>
                    <td class="col-md-2"><span class="ng-binding">{{dataObj.landAcreage}}</span></td>
                </tr>
                <tr>
                    <td>项目简称</td>
                    <td><span class="ng-binding">{{dataObj.shortName}}</span></td>
                    <td>建筑面积(㎡)</td>
                    <td><span class="ng-binding">{{dataObj.buildingAcreage}}</span></td>
                </tr>
                <tr>
                    <td>简称代码</td>
                    <td><span class="ng-binding">{{dataObj.pyCode}}</span></td>
                    <td>实用面积(㎡)</td>
                    <td><span class="ng-binding">{{dataObj.operateAcreage}}</span></td>
                </tr>
                <tr>
                    <td>建筑类别</td>
                    <td><span class="ng-binding">{{dataObj.buildingTypeStr}}</span></td>
                    <td>公区面积(㎡)</td>
                    <td><span class="ng-binding">{{dataObj.publicAcreage}}</span></td>
                </tr>
                <tr>
                    <td>所在省份</td>
                    <td><span class="ng-binding">{{dataObj.province}}</span></td>
                    <td>设计年限</td>
                    <td><span class="ng-binding">{{dataObj.designYear}}</span></td>
                </tr>
                <tr>
                    <td>所在城市</td>
                    <td><span class="ng-binding">{{dataObj.city}}</span></td>
                    <td>外窗材料</td>
                    <td><span class="ng-binding"></span></td>
                </tr>
                <tr>
                    <td>所在区县</td>
                    <td><span class="ng-binding">{{dataObj.region}}</span></td>
                    <td>外墙材料</td>
                    <td><span class="ng-binding"></span></td>
                </tr>
                <tr>
                    <td>所在街道办</td>
                    <td><span class="ng-binding">{{dataObj.subdistrictOffice}}</span></td>
                    <td>墙窗比</td>
                    <td><span class="ng-binding"></span></td>
                </tr>
                <tr>
                    <td>社区居委会</td>
                    <td><span class="ng-binding">{{dataObj.committees}}</span></td>
                    <td>气候类型</td>
                    <td><span class="ng-binding"></span></td>

                </tr>
                <tr>
                    <td>供冷（暖）面积(㎡)</td>
                    <td><span class="ng-binding"></span></td>
                    <td>注册门牌号</td>
                    <td><span class="ng-binding">{{dataObj.doorNumber}}</span></td>
                </tr>
                <tr>
                    <td>光伏面积（单位：㎡）</td>
                    <td><span class="ng-binding">{{dataObj.photovoltaicAcreage}}</span></td>
                    <td>光伏安装功率（单位：KW）</td>
                    <td><span class="ng-binding"></span></td>
                </tr>
                <tr>
                    <td>光伏储电容量（单位：KW）</td>
                    <td><span class="ng-binding"></span></td>
                    <td>光伏单价（单位：元/度）</td>
                    <td><span class="ng-binding"></span></td>
                </tr>
                <tr>
                    <td>停车场面积(㎡)</td>
                    <td><span class="ng-binding">{{dataObj.parkingLotAcreage}}</span></td>
                    <td>停车位数(个)</td>
                    <td><span class="ng-binding">{{dataObj.parkingNumber}}</span></td>
                </tr>
                <tr>
                    <td>经度</td>
                    <td><span class="ng-binding">{{dataObj.divisionLong}}</span></td>
                    <td>纬度</td>
                    <td><span class="ng-binding">{{dataObj.divisionLat}}</span></td>
                </tr>
                <tr>
                    <td>项目地址</td>
                    <td><span class="ng-binding"></span></td>
                    <td>使用面积(㎡)</td>
                    <td><span class="ng-binding">{{dataObj.leaseAcreage}}</span></td>
                </tr>
                <tr>
                    <td>光伏组件数量</td>
                    <td><span class="ng-binding"></span></td>
                    <td>运营开始日期</td>
                    <td><span class="ng-binding"></span></td>
                </tr>
                <tr>
                    <td>项目LOGO</td>
                    <td colspan="3"><img style="height: 45px;width: 90px;" :src="dataObj.logo"></td>
                    
                </tr>
                
                </tbody>
            </table>
          </div>
          <div class="right-content">
            <table class="table table-condensed table-striped table-bordered table-hover">
                  <thead>
                  <tr>
                      <th colspan="8" class="body-head-title"> 
                        <span> 
                          建筑/楼栋信息
                        </span> 
                      </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                      <td class="col-md-1" align="center">楼栋编号</td>
                      <td class="col-md-2" align="center">楼栋名称</td>
                      <td class="col-md-1" align="center">楼栋功能</td>
                      <td class="col-md-1" align="center">建筑结构</td>
                      <td class="col-md-1" align="center">建筑面积</td>
                      <td class="col-md-1" align="center">竣工年份</td>
                      
                      <td class="col-md-1" align="center">用能人数</td>
                      <td class="col-md-1" align="center">层数</td>
                  </tr>
                  <tr ng-repeat="building in buildingList" class="ng-scope" style="" v-for="item in struList">
                      <td align="center" class="ng-binding">{{item.buildID}}</td>
                      <td align="center" class="ng-binding">{{item.buildName}}</td>
                      <td align="center" class="ng-binding">{{item.buildFunc}}</td>
                      <td align="center" class="ng-binding">{{item.struType}}</td>
                      <td align="center" class="ng-binding">{{item.totalArea}}</td>
                      <td align="center" class="ng-binding">{{item.buildYear}}</td> 
                      <td align="center" class="ng-binding">{{item.usedPerson}}</td>
                      <td align="center" class="ng-binding">{{item.floor}}</td>
                  </tr>
                  </tbody>
              </table>
              <p style="  height:25px; line-height:25px;color: #fff" class="ng-binding">&nbsp;本项目共有楼栋：{{struList.length}} 栋，总建筑面积：{{dataObj.buildingAcreage}} ㎡</p>
              <img v-if="dataObj.attachmentPath" class="project-image ng-scope"  :src="dataObj.attachmentPath">
              <img v-if="dataObj.attachmentPathTwo" class="project-image ng-scope"  :src="dataObj.attachmentPathTwo">
          </div>
        </div>
      </div>
    </Wrap>
  </div>
</template>

<script type="text/ecmascript-6">
import Wrap from '@/components/energy-wrap'
import { projectAndBuilding } from '@/api/energy/energy'
export default {
  components: {
    Wrap
  },
  data () {
    return {
      dataObj: {},
      struList: []
    }
  },
  created() {
    projectAndBuilding().then(res => {
      this.dataObj = res.data.data
      this.struList = res.data.data.buildingList
    })
  }
}
</script>

<style lang="scss" scoped>
.project-image{
  float: left;
  width: 50%;
}
.left-content{
  width: 33%;
  float: left;
  margin-right: 1%;
}
.right-content{
  width: 66%;
  float: left;
}
.form-find {
    padding: 20px;
    background-color: #081325;
    box-shadow: inset 0px 1px 13px 0px #1AABF3;
    border: solid 1px rgba(15, 80, 111, 0.55);
    margin-bottom: 10px;
   .form-group {
        margin-right: 3px;
        margin-bottom: 3px;
    }
}
.form-inline label {
    margin-right: 7px;
}
.form-group-control {
    display: inline-block;
    vertical-align: middle;
}
.nav-tabs {
    margin-bottom: 15px;
    &>li.active,&>li:hover {
      background-color: transparent;
    }
}
@media (min-width: 768px){
  .form-inline .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
  }
}
</style>
